<template>
	<div id="app">
		<div class="login_container">
			<div class="login_box">
				<div class="img_box">
					<img src="../assets/img/logo.png" />
				</div>
				<el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" class="loginForm">
				  <el-form-item prop="username">
				    <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
				  </el-form-item>
				  <el-form-item prop="userpwd">
				    <el-input v-model="loginForm.userpwd"
					prefix-icon="el-icon-lock"
					show-password></el-input>
				  </el-form-item>
				  <el-form class="butns">
					  <el-button type="primary" round @click="login">登录</el-button>
					  <el-button type="info" round>重置</el-button>
				  </el-form>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					username: 'zhangsan',
					userpwd: '123456'
				},
				loginFormRules: {
					 username:[
					            { required: true, message: '请输入登录名称', trigger: 'blur' },
					            { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
					          ],
					 userpwd: [
					            { required: true, message: '请输入登录密码', trigger: 'blur' },
					            { min: 6, max: 10, message: '密码长度要在6到10之间', trigger: 'blur' }
					          ]
				}
			}
		},
		methods: {
			login() {
				// 预验证 如果表单验证通过，则允许发送登录请求，如果验证不通过直接截至代码运行
				this.$refs.loginForm.validate( async valid =>{
					//如果表单验证通过，valid的值会被传递为true，否则为false
					console.log(valid);
					if(!valid) return this.$message.error('请输入合法的账户名密码');
					let {data: res} = await this.$http.post('/manager/login',this.loginForm)
					console.log(res)
					if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
					this.$message.success(res.meta.msg)
					//把token存到sessionStroage里边
					window.sessionStorage.setItem('token',res.data.token)
					//登陆成功 跳转到主页
					this.$router.push('/home')
				})
			}
		}
	}
</script>

<style lang="scss">
	.login_container {
	  height: 100%;
	  background-color: tomato;
	}
	.login_box {
		width: 450px;
		height: 300px;
		background-color: orange;
		border-radius: 3px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		.img_box{
			height: 130px;
			width: 130px;
			border: 1px solid #eee;
			border-radius: 50%;
			padding: 10px;
			box-shadow: 0 0 10px #ddd;
			position: absolute;
			left: 50%;
			transform: translate(-50%,-50%);
			background-color: lavender;
			display: flex;
			justify-content: center;
			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: lavender;
			}
		}
		.loginForm {
			position: absolute;
			bottom: 0px;
			width: 100%;
			padding: 0 20px;
			box-sizing: border-box;
			.butns{
				display: flex;
				justify-content: center;
			}
		}
	}
</style>
